import React from 'react';
import {Card} from "antd";
import DataFilter from "./DataFilter";
import DataTable from "./DataTable";
import {fetchStayReportData} from "../../services/report";
import PageHeaderWrapper from '@/components/PageHeaderWrapper';


import {withRouter} from "react-router-dom";
import TimeLineChart from "./TimeLineChart";

@withRouter
class ReportContent extends React.Component {
  state = {
    type: 'all',
    allData: [],
    detailData: [],
    loading: false,
    chartData: [],
    cur_device: '',
  };

  handleFetchReportData = async (params) => {
    this.setState({loading: true});
    const rsp = await this.props.fetch(params);
    const {type, device_id} = params;
    if (type === 'all') {
      this.setState({allData: rsp.data, loading: false, type, cur_device: device_id});
    } else {
      this.setState({detailData: rsp.data, loading: false, type, cur_device: device_id});
    }
  };

  handleChangeType = (type) => {
    this.setState({type})
  };

  render() {
    return (
      <div>
        <PageHeaderWrapper title={this.props.title}>
          <Card bordered={false}>
            <DataFilter onFetch={this.handleFetchReportData} type={this.state.type}
                        device={this.state.cur_device} {...this.props}
                        onChangeType={this.handleChangeType}/>
            {
              this.state.type === 'chart' ? <TimeLineChart chartData={this.dataTable.chartData}/> :
                <DataTable onFetch={this.handleFetchReportData}
                           ref={table => this.dataTable = table} {...this.state} {...this.props} />
            }
          </Card>
        </PageHeaderWrapper>
      </div>
    )
  }
}

export default ReportContent;
